<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>文本框：{{web.text}}</h3>
    <h3>单选框：{{web.radio}}</h3>
    <h3>复选框：{{web.checkbox}}</h3>
    <h3>记住密码框：{{web.remember}}</h3>
    <h3>下拉框：{{web.select}}</h3>
    <hr>
    <!-- 文本框 -->
    数据双向绑定<input type="text" v-model="web.text" />
    <hr><br>
    <!-- 单选框 -->
    <input type="radio" v-model="web.radio" value="1" />唱
    <input type="radio" v-model="web.radio" value="2" />跳
    <hr><br>
    <!-- 复选框 -->
    <input type="checkbox" v-model="web.checkbox" value="a" />唱
    <input type="checkbox" v-model="web.checkbox" value="b" />跳
    <input type="checkbox" v-model="web.checkbox" value="c" />rep
    <hr><br>
    <!-- 记住密码 -->
    <input type="checkbox" v-model="web.remember" />记住密码
    <hr><br>
    <!-- 下拉框 -->
    <select v-model="web.select">
      <option value="">请选择</option>
      <option value="A">写作</option>
      <option value="B">画画</option>
      <option value="C">运动</option>
    </select>
    <script type="module">
      import { createApp, reactive } from './vue.esm-browser.js'
      createApp({
        setup() {
          const web = reactive({
            text: 'good',
            radio: '',
            checkbox: [],
            select: '',
            remember: false
          })
          return {
            web
          }
        }
      }).mount('#app')
    </script>
  </div>
</body>

</html>